<template>
  <div class="cover-row-item-wrapper" @click="onClk">
    <van-row>
      <course-tag :type="item.tagType" />
      <img :src="item.img" />
    </van-row>
    <p>{{ item.name }}</p>
  </div>
</template>
<script>
import * as CONSTANTS from '@/constants/index'
import CourseTag from './CourseTag'
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
      required: true,
    },
  },
  components: { CourseTag },
  data() {
    return {}
  },
  computed: {},
  mounted() {},
  filters: {},
  watch: {},
  methods: {
    onClk() {
      if (this.item.isSpecial) return this.item.fn()
      const { link } = this.item
      this.$store.dispatch(CONSTANTS.DISPATCH_REDIRECT, {
        url: link,
        isWebview: true,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.cover-row-item-wrapper {
  display: inline-block;
  max-width: 31.2%;
  min-width: 31.2%;
  margin-top: 16px;
  // background-color: #00ffff;

  & > div:first-of-type {
    position: relative;
    & > div {
      position: absolute;
      top: 0;
      left: 0;
    }
    & > img {
      width: 100%;
      object-fit: cover;
      background-image: linear-gradient(90deg);
      border-radius: 8px;
    }
  }

  & > p {
    margin: 0;
    margin-top: 5px;
    line-height: 40px;
    font-family: 'SourceHanSansCN-Normal';
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20px;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.8);
    overflow-wrap: anywhere;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
  }
}
</style>
